<!DOCTYPE html>
<html>
<head>
    <title>Capacitor Diagram</title>
</head>
<body>
<canvas id="capacitorCanvas" width="500" height="400" style="background-color: #ffffff;"></canvas>
<script>
    const canvas = document.getElementById('capacitorCanvas');
    const ctx = canvas.getContext('2d');

    // General settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // --- Plate Coordinates ---
    const leftPlate = {
        topLeft: { x: 160, y: 115 },
        topRight: { x: 190, y: 105 },
        bottomRight: { x: 190, y: 285 },
        bottomLeft: { x: 160, y: 295 }
    };
    const plateSeparation = 140;
    const rightPlate = {
        topLeft: { x: leftPlate.topLeft.x + plateSeparation, y: leftPlate.topLeft.y },
        topRight: { x: leftPlate.topRight.x + plateSeparation, y: leftPlate.topRight.y },
        bottomRight: { x: leftPlate.bottomRight.x + plateSeparation, y: leftPlate.bottomRight.y },
        bottomLeft: { x: leftPlate.bottomLeft.x + plateSeparation, y: leftPlate.bottomLeft.y }
    };

    // --- Draw Plates ---
    ctx.lineWidth = 2;
    // Draw left plate
    ctx.beginPath();
    ctx.moveTo(leftPlate.topLeft.x, leftPlate.topLeft.y);
    ctx.lineTo(leftPlate.bottomLeft.x, leftPlate.bottomLeft.y);
    ctx.lineTo(leftPlate.bottomRight.x, leftPlate.bottomRight.y);
    ctx.lineTo(leftPlate.topRight.x, leftPlate.topRight.y);
    ctx.closePath();
    ctx.stroke();

    // Draw right plate
    ctx.beginPath();
    ctx.moveTo(rightPlate.topLeft.x, rightPlate.topLeft.y);
    ctx.lineTo(rightPlate.bottomLeft.x, rightPlate.bottomLeft.y);
    ctx.lineTo(rightPlate.bottomRight.x, rightPlate.bottomRight.y);
    ctx.lineTo(rightPlate.topRight.x, rightPlate.topRight.y);
    ctx.closePath();
    ctx.stroke();

    // --- Draw Central Axis ---
    const axisY = 205;
    const axisStart = 80;
    const axisEnd = 420;
    const dashStart = leftPlate.topLeft.x + (leftPlate.topRight.x - leftPlate.topLeft.x) / 2;
    const dashEnd = rightPlate.topLeft.x + (rightPlate.topRight.x - rightPlate.topLeft.x) / 2;

    ctx.beginPath();
    ctx.moveTo(axisStart, axisY);
    ctx.lineTo(dashStart, axisY);
    ctx.stroke();

    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.moveTo(dashStart, axisY);
    ctx.lineTo(dashEnd, axisY);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.setLineDash([]);
    ctx.moveTo(dashEnd, axisY);
    ctx.lineTo(axisEnd, axisY);
    ctx.stroke();
    
    // --- Draw Dimension 'x' ---
    const dimY = 80;
    const dimStartX = leftPlate.topLeft.x;
    const dimEndX = rightPlate.topLeft.x;

    // Dashed vertical lines
    ctx.beginPath();
    ctx.setLineDash([3, 3]);
    ctx.lineWidth = 1;
    ctx.moveTo(dimStartX, leftPlate.topLeft.y);
    ctx.lineTo(dimStartX, dimY);
    ctx.moveTo(dimEndX, rightPlate.topLeft.y);
    ctx.lineTo(dimEndX, dimY);
    ctx.stroke();
    
    // Horizontal dimension line with arrows
    ctx.setLineDash([]);
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(dimStartX, dimY);
    ctx.lineTo(dimEndX, dimY);
    // Arrow left
    ctx.moveTo(dimStartX + 10, dimY - 4);
    ctx.lineTo(dimStartX, dimY);
    ctx.lineTo(dimStartX + 10, dimY + 4);
    // Arrow right
    ctx.moveTo(dimEndX - 10, dimY - 4);
    ctx.lineTo(dimEndX, dimY);
    ctx.lineTo(dimEndX - 10, dimY + 4);
    ctx.stroke();
    
    // 'x' label
    ctx.font = 'italic 22px Arial';
    ctx.fillText('x', (dimStartX + dimEndX) / 2 - 5, dimY - 8);

    // --- "metal plates" label and leader lines ---
    ctx.font = '20px Arial';
    ctx.textAlign = 'left';
    ctx.fillText('metal plates', 340, 70);
    
    const leaderStart = { x: 345, y: 80 };
    const leaderEndLeft = { x: leftPlate.topRight.x + 5, y: leftPlate.topRight.y + 5 };
    const leaderEndRight = { x: rightPlate.topLeft.x - 5, y: rightPlate.topLeft.y + 5};

    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(leaderStart.x, leaderStart.y);
    ctx.lineTo(leaderEndLeft.x, leaderEndLeft.y);
    ctx.moveTo(leaderStart.x, leaderStart.y);
    ctx.lineTo(leaderEndRight.x, leaderEndRight.y);
    ctx.stroke();

    // --- Figure Caption ---
    ctx.lineWidth = 2; // reset
    ctx.textAlign = 'center';
    ctx.font = 'bold 20px Arial';
    ctx.fillText('Fig. 6.1', canvas.width / 2, 380);

</script>
</body>
</html>